<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<h3>createElement()------创建元素节点</h3>
		<div class="bbb1"></div>
		
		<script type="text/javascript">
			var bbb1 = document.getElementsByClassName('bbb1')[0]
			var aaa1 = document.createElement('div')
			aaa1.innerHTML = '创建的节点放进body'
			bbb1.appendChild(aaa1)
		</script>
		<hr />
		<!---*************************************************-->		
		
		
		
		
		
		<h3>createTextNode()--------创建文本节点</h3>
		
		<div class="bbb2"></div>
		<script type="text/javascript">
			var bbb2 = document.getElementsByClassName('bbb2')[0]
			var text2 = document.createTextNode('创建的文本节点')
			bbb2.appendChild(text2)
		</script>
		<hr />
		<!--***************************************************-->
		
		
		
		
		<h3>a.insertBefore(b,c)--------将b标签放进a标签中c的前边-----剪切</h3>
		<p class="p3">原本是在div外部</p>		
		<div class="bbb3">
			<span class="span3">span标签</span>
		</div>
		<script type="text/javascript">
			var bbb3 = document.getElementsByClassName('bbb3')[0]
			var span3 = document.getElementsByClassName('span3')[0]
			var p3 = document.getElementsByClassName('p3')[0]
			bbb3.insertBefore(p3, span3)
		</script>
		<hr />
		<!--***************************************************-->
		
		
		
		
		<h3>a.replaceChild(b,c)--------将 b 标签替换 a 中的 c--------剪切</h3>
		<p class="p4">原本在div外部</p>
		<div class="bbb4">
			<span class="span4">000000</span>
		</div>
		<script type="text/javascript">
			var bbb4 = document.getElementsByClassName('bbb4')[0]
			var span4 = document.getElementsByClassName('span4')[0]
			var p4 = document.getElementsByClassName('p4')[0]
			
			bbb4.replaceChild(p4, span4)
		</script>
		<hr />
		<hr />
		<!--***************************************************-->
		<h3>a.insertAfter(b,c)---------将b标签放到a下的c后面</h3>
		<p class="p5">原本在div外部</p>
		<div class="bbb5">
			<span class="span5">span标签</span>
			<p>00000000000000000</p>
		</div>
		<script type="text/javascript">
			Element.prototype.insertAfter = function(b,c){
				// 判断c后面是否有兄弟元素，有的话就将b放在cAfter前面，没有的话就直接放在div最后
				var cAfter = c.nextElementSibling
				if (cAfter) {
					this.insertBefore(b,cAfter)
				} else{
					this.appendChild(b)
				}
			} 
			var bbb5 = document.getElementsByClassName('bbb5')[0]
			var p5 = document.getElementsByClassName('p5')[0]
			var span5 = document.getElementsByClassName('span5')[0]
			bbb5.insertAfter(p5,span5)
		</script>
		
	</body>
</html>
